<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/jquery_ui/jquery-ui-1.10.0.custom.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap/bootstrap-responsive.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/jquery_ui/jquery.ui.1.10.0.ie.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/slidernav.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/light-theme.css}" />
</head>
<body class='contrast-sea-blue sign-up contrast-background'>
<div id='wrapper'>
    <div class='application'>
        <div class='application-content'>
            <div class='icon-book'></div><span>简易教材发放系统</span>
        </div>
    </div>
    <div class='controls'>
        <div class='caret'></div>
        <div class='form-wrapper'>
            <h1 class='text-center'>注册</h1>
            <form>
            <div class='row-fluid'>
                <div class='span12 icon-over-input'>
                    <input class="span12" id="login_name" name="loginName" placeholder="login name" type="text" value="" />
                    <i class='icon-user muted'></i>
                </div>
            </div>
            <div class='row-fluid'>
                <div class='span12 icon-over-input'>
                    <input class="span12" id="password" name="password" placeholder="password" type="password" value="" />
                    <i class='icon-lock muted'></i>
                </div>
            </div>
            <div class='row-fluid'>
                <div class='span12 icon-over-input'>
                    <input class="span12" id="password_confirmation" name="password_confirmation" placeholder="Password confirmation" type="password" value="" />
                    <i class='icon-lock muted'></i>
                </div>
            </div>
            <div class='row-fluid'>
                <div class='span12 icon-over-input'>
                    <input class="span12" id="user_name" name="userName" placeholder="user name" type="text" value="" />
                    <i class='icon-user-md muted'></i>
                </div>
            </div>
            <div class='row-fluid'>
                <div class='span12 icon-over-input'>
                    <input class="span12" id="mobile" name="mobile" placeholder="mobile" type="text" value="" />
                    <i class='icon-mobile-phone muted'></i>
                </div>
            </div>
            <button id="btn-register" class="btn btn-block" name="button" type="button">注册</button>
            </form>
        </div>
    </div>
    <div class='login-action text-center'>
        <a th:href="@{/user/to_login}"><i class='icon-user'></i>登录</a>
    </div>
</div>
<!-- jquery -->
<script th:src="@{/js/jquery/jquery.min.js}" type="text/javascript"></script>
<script type="text/javascript">
    $("#btn-register").click(function(){
        var loginName = $("#login_name").val(),
            password = $("#password").val(),
            userName = $("#user_name").val(),
            mobile = $("#mobile").val();
        $.post("${pageContext.request.contextPath}/user/register",{"loginName":loginName,"password":password,"userName":userName,"mobile":mobile},
            function(data){
                if(data == "SUCCESS"){
                    window.location.href = "${pageContext.request.contextPath}/user/to_login";
                }
                else {
                    alert("用户已存在！");
                }
            });
    });
</script>
</body>
</html>